<template>
    <div class="common-box" v-if="boxIsShow">
        <div class="common-content-box">
            <div class="common-content-top-box">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="音色克隆" name="1" value="1"></el-tab-pane>
                    <el-tab-pane label="音频任务" name="2" value="2"></el-tab-pane>
                    <el-tab-pane label="视频任务" name="3" value="3"></el-tab-pane>
                    <el-tab-pane label="剪辑任务" name="4" value="4"></el-tab-pane>
                  </el-tabs>
            </div>
            <div class="common-content-bottom-box">
                <div class="table_search_box">
                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                          <el-form-item label="用户名称">
                            <el-input v-model="searchForm.nickName" placeholder="请输入" size="small"></el-input>
                          </el-form-item>
                          <el-form-item label="用户编号">
                            <el-input v-model="searchForm.uuid" placeholder="请输入" size="small"></el-input>
                          </el-form-item>
                          <el-form-item label="标题">
                            <el-input v-model="searchForm.title" placeholder="请输入" size="small"></el-input>
                          </el-form-item>
                        <el-form-item>
                          <el-button type="primary" @click="search" size="small">查询</el-button>
                          <el-button type="primary" @click="initsearch" size="small" plain>清空</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="table_box" v-if="activeName=='1'">
                    <el-table
                        :data="tableData"
                        stripe
                        style="width: 100%">
                        <el-table-column
                        prop="uuid"
                        label="用户id"
                        width="300"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="nickName"
                        label="用户名"
                        width="200"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="updateNum"
                        label="剩余修改"
                        align="center"
                        width="150">
                        </el-table-column>
                        <el-table-column
                        prop="useTime"
                        label="克隆时间"
                        align="center"
                        width="200">
                        </el-table-column>
                        <el-table-column
                        label="到期时间"
                        prop="ExpireTime"
                        align="center"
                        width="200"
                        :formatter="formatTime2">
                        </el-table-column>
                        <el-table-column
                        label="错误原因"
                        prop="errMessage"
                        align="center">
                        </el-table-column>
                    </el-table>
                    <pagination
                    :total="total"
                    :limit="pageSize"
                    :page="pageNumber"
                    :pageSize="pageSize"
                    @pageChange="pageChange"
                    ></pagination>
                </div>
                <div class="table_box" v-if="activeName=='2'">
                    <el-table
                        :data="tableData"
                        stripe
                        style="width: 100%">
                        <el-table-column
                        prop="uuid"
                        label="用户id"
                        width="300"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="nickName"
                        label="用户名"
                        width="200"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="yinpinName"
                        label="名称"
                        align="center"
                        width="150">
                        </el-table-column>
                        <el-table-column
                        label="状态"
                        align="center"
                        width="150">
                        <template slot-scope="scope">
                            {{ scope.row.status===0?'待执行':scope.row.status===1?'正在合成':scope.row.status===2?'合成成功':'合成失败' }}
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="执行时间"
                        prop="zhixingTime"
                        align="center"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        label="完成时间"
                        prop="finishTime"
                        align="center"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        label="操作"
                        align="center">
                        <template slot-scope="scope">
                            <el-button @click="play(scope.row.yinpinUrl)" type="primary" size="small">播放</el-button>
                            <!-- <el-button @click="del(scope.row.id)" type="danger" size="small">删除</el-button> -->
                        </template>
                        </el-table-column>
                    </el-table>
                    <pagination
                    :total="total"
                    :limit="pageSize"
                    :page="pageNumber"
                    :pageSize="pageSize"
                    @pageChange="pageChange"
                    ></pagination>
                </div>
                <div class="table_box" v-if="activeName=='3'">
                    <el-table
                        :data="tableData"
                        stripe
                        style="width: 100%">
                        <el-table-column
                        prop="uuid"
                        label="用户id"
                        width="300"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="nickName"
                        label="用户名"
                        width="200"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="videoTitle"
                        label="名称"
                        align="center"
                        width="150">
                        </el-table-column>
                        <el-table-column
                        label="状态"
                        align="center"
                        width="200">
                        <template slot-scope="scope">
                            {{ scope.row.status===0?'待执行':scope.row.status===1?'正在合成':scope.row.status===2?'合成成功':'合成失败' }}
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="执行时间"
                        prop="zhixingTime"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        label="操作"
                        align="center">
                        <template slot-scope="scope">
                            <el-button @click="play(scope.row.videoUrl)" type="primary" size="small">播放</el-button>
                            <!-- <el-button @click="del(scope.row.id)" type="danger" size="small">删除</el-button> -->
                        </template>
                        </el-table-column>
                    </el-table>
                    <pagination
                    :total="total"
                    :limit="pageSize"
                    :page="pageNumber"
                    :pageSize="pageSize"
                    @pageChange="pageChange"
                    ></pagination>
                </div>
                <div class="table_box" v-if="activeName=='4'">
                    <el-table
                        :data="tableData"
                        stripe
                        style="width: 100%">
                        <el-table-column
                        prop="uuid"
                        label="用户id"
                        width="300"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="nickName"
                        label="用户名"
                        width="200"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        label="状态"
                        align="center"
                        width="200">
                        <template slot-scope="scope">
                            {{ scope.row.state===0?'正在剪辑':scope.row.state===1?'剪辑成功':'剪辑失败' }}
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="创建时间"
                        prop="createTime"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        label="操作"
                        align="center">
                        <template slot-scope="scope">
                            <el-button @click="play(scope.row.resultUrl)" type="primary" size="small">播放</el-button>
                            <!-- <el-button @click="del(scope.row.id)" type="danger" size="small">删除</el-button> -->
                        </template>
                        </el-table-column>
                    </el-table>
                    <pagination
                    :total="total"
                    :limit="pageSize"
                    :page="pageNumber"
                    :pageSize="pageSize"
                    @pageChange="pageChange"
                    ></pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Pagination from "@/components/pagination.vue";
export default {
    components: {
        Pagination
    },
  data() {
    return {
        boxIsShow:false,
        activeName:"1",
        searchForm:{
            nickName:"",
            uuid:"",
            title:""
        },
        total: 0,
        pageSize: 30,
        pageNumber: 1,
        tableData:[],
        topData:null
    };
  },
  created() {
    
  },
  mounted(){
  },
  methods: {
    formatTime2(row, column) {
        if (!row.expireTime) return '';
        const date = new Date(parseInt(row.expireTime));
        return date.toLocaleString('zh-CN', { 
        year: 'numeric', 
        month: '2-digit', 
        day: '2-digit', 
        hour: '2-digit', 
        minute: '2-digit', 
        second: '2-digit' 
        });
    },
    handleClick(tab, event) {
        console.log(tab._props.name);
        this.activeName=tab._props.name
        this.initsearch();
    },
    __init() {
        this.getDataList();
    },
    getDataList(){
      var url="manager/getAllTasksByPage";
      var params={
        ...this.searchForm,
        pageSize: this.pageSize,
        pageNum: this.pageNumber,
        type:this.activeName
      }
      this.$post(url, params).then((res) => {
        console.log(res)
        if (res.code === 200) {
            this.tableData=res.data.list;
            this.total=res.data.total;
        } else {
          this.$message.error(res.msg)
        }
      });
    },
    pageChange(e) {
      this.pageNumber = e.page;
      this.getDataList();
    },
    search(){
      this.pageNumber=1;
      this.getDataList();
    },
    initsearch(){
        this.searchForm={
            nickName:"",
            uuid:"",
            title:""
        }
        this.pageNumber=1;
        this.getDataList();
    },
    play(url){
        window.open(url)
    }
  }
}
</script>
<style scoped lang="scss">
  .common-box{
    background-color: #f9f9fb;
    height: 100%;
    position: relative;
  }
  .common-content-box{
    height: 95%;
    margin-top: 2%;
    width: 96%;
    display: inline-block;
  }
  .common-content-top-box{
    width: 98%;
    background-color: #fff;
    min-height: 60px;
    line-height:60px;
    box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.1);
    border-radius: 5px;
    text-align: left;
    padding-left:2%
  }
  .form_box{
    margin-left: 20px;
    margin-top: 25px;
    width: 40%;
    display: inline-block;
  }
  .common-content-bottom-box{
    width: 100%;
    background-color: #fff;
    min-height: 200px;
    box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.1);
    border-radius: 5px;
    margin-top: 30px;
    padding: 20px 0;
  }
  .table_search_box{
    text-align: left;
    width: 96%;
    margin-left: 2%;
    display: inline-block;
    margin-top: 20px;
  }
  .table_box{
    width: 96%;
    margin-left: 2%;
    height: calc(100% - 255px);
  }
</style>